<style lang="scss" scoped>
$height:60rpx;
.container{
	width: 100vw;
	min-height: 100vh;
	// background-color: #e6e6e6;
}
.scroll-list{
	// padding-top: $height;
	height: 100vh;
}
.filters{
	height: $height;
	.item{
		width: 22%;
		border:1px solid #e6e6e6;
		padding: 4px 0;
		text-align: center;
		border-radius: 4px;
		font-size: 30rpx;
		.icon{
			width: 20rpx;
			margin-left: 20rpx;
			// float: right;
		}
	}
}
</style>
<template>
	<view class="container">
		<!-- <view class="tips pl-3 py-3" @click="sortShow=!sortShow">
			<text class="font-30 color-999 mr-2" style="color: #515151;">排序选择</text>
			<image :src="`/static/icon/${sortShow?'up':'down'}.png`" mode="widthFix" class="mr-1" style="width: 34rpx;vertical-align: bottom;"/>
		</view>
		<view class="sort tips pl-3 mt-3 mb-4" v-if="sortShow">
			<view>
				<text class="d-block font-30 color-333 my-3">按日期排序</text>
				<view>
					<button  type="default" size="mini" :plain="sort!=='desc'" @click="setSort('desc')" class="primary-btn mr-2">倒序</button>
					<button type="default" size="mini" :plain="sort!=='asc'"  @click="setSort('asc')"  class="primary-btn mr-2">正序</button>
				</view>
			</view>
			<view >
				<text class="d-block font-30 color-333 my-3">日期范围</text>
				<view class="px-2">
					<uni-datetime-picker
						@change="setDate"
						type="daterange"
						:start="rangeDate[0]"
						:end="rangeDate[1]"
						rangeSeparator="至"
					/>
				</view>
			</view>
		</view> -->
<!-- 		<view class="filters mt-2 d-flex around">
			<text>年</text>
			<text>月</text>
			<text>日</text>
		</view>
		 <picker :value="index" :range="origin_date.year">
			<text>123</text>
		</picker> -->
	<!-- 	 <view class="uni-list">
			<view class="uni-list-cell">
				
				<view class="uni-list-cell-db">
					<picker :range="array">
						<text class="uni-input">{{array[index]}}</text>
					</picker>
				</view>
			</view>
		</view> -->
		<view class="filters auto-90 d-flex around mt-3" >
			<picker class="item" :range="origin_date.year" @change="setDate('year',$event)">
				<text>{{filter_date.year || '年'}}</text>
				<image src="/static/icon/down.png" mode="widthFix" class="icon"></image>
			</picker>
			<picker class="item" :range="origin_date.month" @change="setDate('month',$event)" :disabled="!filter_date.year">
				<text>{{filter_date.month || '月'}}</text>
				<image src="/static/icon/down.png" mode="widthFix" class="icon"></image>
			</picker>
			<picker class="item" :range="origin_date.day" @change="setDate('day',$event)" :disabled="!filter_date.month || !filter_date.year">
				<text>{{filter_date.day || '日'}}</text>
				<image src="/static/icon/down.png" mode="widthFix" class="icon"></image>
			</picker>
			<picker class="item" :range="['日期从新到旧','日期从旧到新']" @change="setSort">
				<text>{{sort=='desc'?"倒序":'正序'}}</text>
				<image src="/static/icon/down.png" mode="widthFix" class="icon"></image>
			</picker>
		</view>
		 <scroll-view :scroll-top="scrollTop" v-if="list.length"  class="scroll-list mt-2" :scroll-y="true" @scrolltolower="lower">
			 <uni-list :border="false">
			 	<uni-list-item style="padding: 0;" :note="val.date" :to="'./details?id='+val.id"  v-for="val in list" :key="val.id" :title="val.title"  :ellipsis="2"/>
			 </uni-list>
		 </scroll-view>

		<view class="mt-5 pt-5" v-else>
			<image src="https://gov-tool.js-cx.cn/static/home/img/empty.png" mode="widthFix" class="empty mx-auto mt-5 d-block " style="width:40vw"></image>
			<text class="text-center d-block mt-5 color-999">暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {policyList} from "@api"
	export default {
		data() {
			return {
				scrollTop:0,
				origin_date:{
					year:[],
					month:[],
					day:[]
				},
				filter_date:{
					year:'',
					month:'',
					day:''
				},
				sort:'desc',
				list:[],
				limit:20
			}
		},
		methods: {
			setDate(type,e){
				this.filter_date[type]=this.origin_date[type][e.target.value]
				if(type==='year'){
					this.filter_date.month=''
					this.filter_date.day=''
				}
				if(type==='month'){
					this.filter_date.day=''
				}
				if(type!='day' && this.filter_date.year && this.filter_date.month){
					const day=new Date(this.filter_date.year,this.filter_date.month,0).getDate()
					this.origin_date.day=[]
					for (let i = 1; i <= day; i++) {
						this.origin_date.day.push(i)
					}
				}
				this.limit=20
				this.scrollTop=0
				this.getList()
			},
			lower(){
				this.limit+=20
				this.getList()
			},
			setSort(e){
				console.log(e.target);
				this.sort=+e.target.value?'asc':'desc'
				this.limit=20
				this.scrollTop=0
				this.getList()
			},
			getFullDate(){
				if(this.filter_date.year){
					if(this.filter_date.month){
						const date=`${this.filter_date.year}-${this.filter_date.month}`;
						if(this.filter_date.day)
							return [date+'-'+this.filter_date.day,date+'-'+this.filter_date.day]
						else{
							return [date+'-01',date+'-'+this.origin_date.day.length]
						}
					}else{
						return [this.filter_date.year+'-01-01',this.filter_date.year+'-12-31']
					}
				}
				return 0
			},
			getList(){
				return policyList({sort:this.sort,date:this.getFullDate(),limit:this.limit})
				.then(res=>{
					this.list=res.list
					return res.list
				})
			},
		
		},
		onLoad() {
			this.getList()
			const date=new Date();
			const year=date.getFullYear()
			for (let i = year; i >= year-29; i--) {
				this.origin_date.year.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				this.origin_date.month.push(i)
			}
			
		}
	}
</script>
